<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.name" placeholder="name" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <!-- <el-input v-model="listQuery.accountId" placeholder="accountId" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" /> -->
      <el-input v-model="listQuery.uid" placeholder="uid" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-select v-model="timeOrder" placeholder="时间排序方式">
        <el-option v-for="item in timeOrders" :key="item.value" :label="item.label" :value="item.value" />
      </el-select>
      <el-date-picker v-model="date2" type="datetimerange" :picker-options="pickerOptions" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        Search
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="50">
        <template slot-scope="scope">{{ scope.$index + 1 }}</template>
      </el-table-column>
      <el-table-column label="uid" width="220" align="center">
        <template slot-scope="scope">{{ scope.row.uid }}</template>
      </el-table-column>
      <el-table-column label="名称" width="120" align="center">
        <template slot-scope="scope">{{ scope.row.name }}</template>
      </el-table-column>
      <el-table-column label="fromUid" width="220" align="center">
        <template slot-scope="scope">{{ scope.row.fromUid }}</template>
      </el-table-column>
      <el-table-column label="pos">
        <template slot-scope="scope">
          {{ jsonObjToStr(scope.row.pos) }}
        </template>
      </el-table-column>
      <el-table-column label="gids">
        <template slot-scope="scope">
          {{ jsonObjToStr(scope.row.gids) }}
        </template>
      </el-table-column>
      <el-table-column label="时间" width="160" align="center">
        <template slot-scope="scope">
          {{ scope.row.time | formatDate }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <router-link :to="'/gameuser/info/'+scope.row.uid">
            <el-button type="primary" size="mini">
              查看
            </el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageNum" @pagination="fetchData" />
  </div>
</template>

<script>

import { formatDate } from '@/utils/date'
import { befireList } from '@/api/loglist'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on

export default {
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    },
    formatDate(time) {
      var date = new Date(time * 1000)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }

  },
  data() {
    return {
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      timeOrders: [
        {
          value: 1,
          label: '按时间顺序'
        }, {
          value: 2,
          label: '按时间倒序'
        }
      ],
      date2: [],
      list: null,
      listLoading: true,
      total: 0,
      timeOrder: 2,
      listQuery: {
        page: 1,
        pageNum: 20,
        name: '',
        timeOrder: 2,
        startTime: 0,
        endTime: 0
      }
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      befireList(this.listQuery).then(response => {
        this.total = response.data.count
        this.list = response.data.logList
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.listQuery.timeOrder = this.timeOrder
      if (this.date2 != null && this.date2.length === 2) {
        this.listQuery.startTime = Date.parse(this.date2[0]) / 1000
        this.listQuery.endTime = Date.parse(this.date2[1]) / 1000
      }
      if (this.date2 == null || this.date2.length === 0) {
        this.listQuery.startTime = 0
        this.listQuery.endTime = 0
      }
      this.fetchData()
    },
    handleView(row) {

    },
    jsonObjToStr(obj) {
      if (obj === []) {
        return '[]'
      }
      if (obj == null) {
        return 'null'
      }
      return JSON.stringify(obj)
    },
    formatTime(dateUnix) {
      if (dateUnix == null) {
        return 'null'
      }
      return new Date(dateUnix).toISOString()
    }
  }
}
</script>
